<template>
  <div class="sql_query">
    <a-row type="flex">
      <a-col :span="6" style="border-right: 1px solid #eee;padding: 10px;overflow: auto;height: calc(100% - 17px);">
        <DataBase :queryForm="queryForm" />
      </a-col>
      <a-col :span="18" style="padding: 10px; height: calc(100% - 18px); overflow: auto;">
        <QueryInput :queryForm="queryForm" style="border-bottom: 1px solid #eee;" />
        <QueryTable :queryForm="queryForm" style="" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import DataBase from './components/data_base.vue'
import QueryTable from './components/query_table.vue'
import QueryInput from './components/query_input.vue'

  export default {
    components: {
      DataBase,
      QueryTable,
      QueryInput
    },
    data() {
      return {
      }
    },
    props: ['queryForm'],
    computed: {
    },
    methods: {},
    mounted () {}
  }
</script>

<style scoped>
.analyse_type>.sql_query {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  margin: 10px;
  height: calc(100% - 18px);
}

.ant-row-flex {
  height: 100%;
}
</style>